<template>
	<view class="content">
		<!-- 使用css画一段圆弧 -->
		<view class="pure_top"></view>
		<view class="usercenter">
			<view class="card">
				<view class="user-img">
					<span class="name">
						<image :src="userState && userState.headimgurl | formatUrl" />
					</span>
					<span class="edit">
						<p @click="_onItemClick('message')">
							{{userState.nickname}}
							<i class="icon icon1" style="font-size: 18px;margin-left:10px">&#xe659;</i>
						</p>
						<span style="font-size: 14px;">
							<i
								class="icon"
								style="font-size: 20px;margin-right:8px;color: #ef591d;"
								
							>
								{{role === 0 ? '&#xe63d;' : (role === 1 ? '&#xe6b3;' : '&#xe616;') }}
							</i>
							<span>{{role === 0 ? '用户' : (role == 1 ? '公益大使' : '店主')}} </span>
						</span>
					</span>
				</view>
				<view class="user-detail"
					v-if="role === 0"
					 @click="_onItemClick('applyStore', { })">
					<p>申请加盟小店<i class="icon icon1">&#xe62d;</i> </p>
				</view>
				<view class="user-detail"
					v-else
					 @click="_onItemClick('invitation', { })">
					<p>推广润园小店<i class="icon icon1">&#xe62d;</i> </p>
				</view>
			</view>
			<view class="part2">
				<view class="block-title">
					<view class="block-title-content" v-show="role === 0" @click="_onItemClick('applyVolunteer', { })">
						<span class="block-title-text">申请成为公益大使</span>
						<span class="block-title-text1"><i class="icon icon1">&#xe62d;</i></span>
					</view>
					<view class="block-title-content" v-show="role === 1" @click="_onItemClick('salesRecords' )">
						<span class="block-title-text">销售列表</span>
						<span class="block-title-text1"><i class="icon icon1">&#xe62d;</i></span>
					</view>
					<view class="block-title-content" v-show="role === 2" @click="_onItemClick('shopKeeper', {})">
						<span class="block-title-text">店铺管理</span>
						<span class="block-title-text1"><i class="icon icon1">&#xe62d;</i></span>
					</view>
				</view>
			</view>
			<view class="part1" v-if="!isLogin" @click="toLogin">您尚未登陆，&nbsp;&nbsp;<span style="margin: 0 5px; letter-spacing: 1.2px">点击登录</span>体验便捷购物<i class="icon icon1">&#xe62d;</i></view>
			<view class="part2">				
				<view class="block-title">
					<view class="block-title-content" @click="_onItemClick('myOrder', { state: 0})">
						<span class="block-title-text">我的订单</span>
						<span class="block-title-text1"><span>查看全部订单</span><i class="icon icon1">&#xe62d;</i></span>
					</view>
				</view>
				<ul class="block-item">
					<li @click="_onItemClick('myOrder', {state: 1})">
						<i class="icon">&#xe624;</i>
						<p>待支付</p>
					</li>
					<li @click="_onItemClick('myOrder', {state: 2})">
						<i class="icon">&#xe621;</i>
						<p>待发货</p>
					</li>
					<li @click="_onItemClick('myOrder', {state: 3})">
						<i class="icon">&#xe625;</i>
						<p>待收货</p>
					</li>
					<li @click="_onItemClick('myOrder', {state: 4})">
						<i class="icon">&#xe620;</i>
						<p>待评价</p>
					</li>
					<li @click="_onItemClick('myOrder', {state: 5})">
						<i class="icon">&#xe627;</i>
						<p>维权售后</p>
					</li>
				</ul>
			</view>
			<view class="part2">
				<ul class="block-item">
					<li @click="_onItemClick('life')">
						<i class="icon">&#xe63a;</i>
						<p>生活馆</p>
					</li>
					<li @click="_onItemClick('comment')">
						<i class="icon">&#xe629;</i>
						<p>我的评价</p>
					</li>
					<li @click="_onItemClick('collection')">
						<i class="icon">&#xe61e;</i>
						<p>我的收藏</p>
					</li>
					<li @click="_onItemClick('chat')">
						<i class="icon">&#xe61c;</i>
						<p>联系客服</p>
					</li>
					<li @click="_onItemClick('account')">
						<i class="icon">&#xe61a;</i>
						<p>账号设置</p>
					</li>
				</ul>
			</view>
		</view>
		<mask-ui ref="maskRef" v-model="boolShow">
		</mask-ui>
	</view>
</template>

<script>
    import base from '@/common/services/base';
    import {getQuery} from '@/utils/utils'
	import maskUi from '@/components/mask/mask.vue'
	import wechat from '@/common/util/wechat.js'
	import {  
        mapState,  
        mapMutations  
    } from 'vuex';  
	import {getCookie, setCookie} from '@/utils/cookiesUtil.js'
    export default {
        name: 'personalCenter',
		components:{
			maskUi
		},
        data() {
            return {
				isLogin: !!getCookie('token'),
				boolShow: false,
				logoImage: require('../../static/avatar.jpg'),
				role: 1 // 普通用户、公益大使、店主 三种身份按需加载页面
            }
        },
		computed: {  
		    ...mapState(['userState']) 
		},
		onLoad() {
		    uni.showTabBar()
		},
		onShow() {
		},
		filters: {
			formatUrl: function(url) {
				return url && url.indexOf('http') !== -1 ? url : 'http://106.13.76.109:8080/xsmall/sys/common/view/'+ url
			}
		},
        methods: {
            _onItemClick (name, param = {}) {
				if(name === 'shopCart') {
					uni.switchTab({
						url: `../${name}/${name}`,
					})
				} else if (name === 'invitation') {
					// 发送邀请链接 到朋友圈或者是分享给微信好友
					// 配置分享的接口。
					const data = {
						title: '您的好友刘佳玮邀请您访问坤物家园网',
						desc: '打造您的品质生活',
						img: 'https://gss1.bdstatic.com/-vo3dSag_xI4khGkpoWK1HF6hhy/baike/s%3D220/sign=17e531fc6963f624185d3e01b746eb32/caef76094b36acafcb272c397ed98d1000e99c34.jpg'
					}
					wechat.share(location.href.split('#')[0], data) // 分享商品详情还是 商城首页
					this.$refs.maskRef.show();
				} else {
					this.$openRouter({
						url: `../${name}/${name}`,
						query: param
					})
				}
            },
			toLogin() {
				uni.navigateTo({
					url: '../login/login'
				});
			}
        },
    }
</script>
<style lang="scss" scoped>
page {
	height: 100%;
	background: #f8f8f8;
}
@font-face {
	font-family: 'iconfont';
	src: url('../../css/font/iconfont.eot');
	src: url('../../css/font/iconfont.eot?#iefix') format('embedded-opentype'),
	url('../../css/font/iconfont.woff') format('woff'),
	url('../../css/font/iconfont.ttf') format('truetype'),
	url('../../css/font/iconfont.svg#iconfont') format('svg');
}
.content {
	width: 100%;
	height: 100%;
	.pure_top {
		width: 100%;  
		height: 200upx;  
		position: relative;  
		left: 0;
		top: 0;
		z-index: 1;  
		overflow: hidden;
		margin-bottom: -100px;
		&:after {
			content: '';
			width: 110%; 
			height: 100px;
			position: absolute;
			left: -5%;
			top: 0;
			z-index: -1;
			border-radius: 0 0 50% 50%;
			background-image: linear-gradient(135deg, #FDD819 0%, #E80505 60%);
		}
	}
	.usercenter {
		box-sizing: border-box;
		.card {
			margin: 20upx 32upx 0upx;
			margin-bottom: 40upx;
			padding: 80upx 40upx 50upx;
			background: #fff;
			border-radius: 12upx;
			box-sizing: border-box;
			box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
			position: relative;
			z-index: 2;
			.user-img {
				display: flex;
				align-items: center;
				.name {
					font-size: 28upx;
					color: #999;
					display: flex;
					align-items: center;
					image {
						width: 160upx;
						height: 160upx;
						margin-right: 20upx;
						border-radius: 50%;
						border: 4upx solid #eee;
					}
				}
				.edit {
					font-size: 30upx;
					line-height: 60upx;
					color: #999;
					.icon-edit {
						font-size: 38upx;
						margin-left: 10upx;
					}
					span {
						display: flex;
						align-items: center;
					}
				}
			}
			.user-detail {
				position: absolute;
				top: 20%;
				transform: translateY(-50%);
				right: 0;
				background-image: linear-gradient(135deg, #FDD819 0%, #E80505 60%);
				font-size: 26upx;
				color: #fff;
				width: 244upx;
				line-height: 56upx;
				padding-left: 40upx;
				box-sizing: border-box;
				border-radius: 40upx 0 0 40upx;	
				box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
			}
		}
		.icon {
		    font-family:"iconfont" !important;
			font-size: 50upx;
			font-weight: 200;
			font-style:normal;
			-webkit-font-smoothing: antialiased;
			-webkit-text-stroke-width: 0.2px;
			-moz-osx-font-smoothing: grayscale;
			cursor: pointer;
			&:hover {
				color: #E80505;
			}
		}
		.icon1 {
			font-size: 24upx;
			font-weight: 100;
		}
		.part1 {
			background-image: linear-gradient(135deg, #FDD819 0%, #E80505 60%);
			font-size: 26upx;
			color: #f8f8f8;
			line-height: 56upx;
			display: inline-block;
			padding: 0 60upx;
			margin: 0 32upx 40upx 0; 
			box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
			border-radius: 0upx 40upx  40upx 0;	
		}
		.part2 {
			margin: 5upx 32upx 25upx;
			border-radius: 10upx;
			margin-bottom: 20upx;
			box-shadow:  0px 2px 10px rgba(0, 0, 0, 0.1);
			.block-title {
				padding: 0 32upx;
				background-color: #fff;
				border-radius: 10upx;
				.block-title-content {
					width: 100%;
					display: flex;
					justify-content: space-between;
					border-bottom: 1px #eee solid;
					padding: 32upx 0;
					.block-title-text {
						font-size: 29upx;
						font-weight: 400;
						&:hover {
							color: #E80505;
						}
					}
					.block-title-text1 {
						font-size: 24upx;
						font-weight: 200;
						color: #999;
						&:hover {
							color: #E80505;
						}
					}
				}
			}
			.block-item {
				display: flex;
				// justify-content: space-around;
				flex-wrap: wrap;
				background-color: #fff;
				text-align: center;
				font-size: 24upx;
				color: #2c2c2c;
				padding: 20upx;
				box-sizing: border-box;
				border-radius: 12upx; 
				list-style-type:none;
				.icon {
					margin-bottom: 24px;
				}
				&:nth-child(2) {
					padding-bottom: 40upx;
				}
				p {
					margin-top: 10upx;
				}
				>li {
					width: 20%;
					margin-top: 12upx;
					list-style-type:none;
				}
			}
		}
	}
}

</style>